<template>
  <el-container class="content">
    <el-header class="header">
      <el-row class="header-row">
        <el-col :span="8">
          <p class="title" title="欢迎页" @click="$router.push('/home/welcome')">机蜂博客</p>
        </el-col>
        <el-col :span="8" :offset="8" class="info">
          <el-dropdown class="info-dropdown" trigger="click">
            <div class="el-dropdown-link">
              <div class="avatar">
                <img :src="avatarSrc" alt="">
              </div>
              <span>{{ loginInfo.nickname }}<i class="el-icon-arrow-down el-icon--right"></i></span>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="edit" icon="el-icon-user">个人信息</el-dropdown-item>
              <el-dropdown-item v-if="loginInfo.roleId === 2" @click.native="auth" icon="el-icon-coordinate">实名信息</el-dropdown-item>
              <el-dropdown-item @click.native="password" icon="el-icon-lock">修改密码</el-dropdown-item>
              <el-dropdown-item @click.native="logout" divided icon="el-icon-switch-button">退出系统</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside class="aside" width="260px">
        <el-menu
          router
          style="border: none"
          :default-active="$route.path"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-submenu index="blog">
            <template slot="title">
              <i class="el-icon-notebook-2"></i>
              <span>博客模块</span>
            </template>
            <el-menu-item-group title="博客管理">
              <el-menu-item index="/home/apply">博客发布</el-menu-item>
              <el-menu-item index="/home/vip/blog">博客列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="类型管理">
              <el-menu-item index="/home/vip/category">博客分类</el-menu-item>
              <el-menu-item index="/home/vip/tag">博客标签</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu v-if="loginInfo.roleId === 1" index="user">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>用户模块</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/userinfo">用户管理</el-menu-item>
              <el-menu-item index="/home/vip">会员管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu v-if="loginInfo.roleId === 1" index="system">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>系统数据</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/blog">全部博客</el-menu-item>
              <el-menu-item index="/home/category">全部分类</el-menu-item>
              <el-menu-item index="/home/tag">全部标签</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
    <vip-auth ref="vipAuth" @close="getLoginInfo"/>
    <userinfo-password ref="userinfoPassword" @close="clearToken"/>
    <userinfo-edit ref="userinfoEdit" @close="getLoginInfo"/>
  </el-container>
</template>

<script>

import VipAuth from '@/views/admin/vip/VipAuth.vue'
import UserinfoPassword from '@/views/admin/userinfo/UserinfoPassword.vue'
import UserinfoEdit from '@/views/admin/userinfo/UserinfoEdit.vue'

export default {
  name: 'HomeView',
  components: { UserinfoEdit, UserinfoPassword, VipAuth },
  data () {
    return {
      loginInfo: {},
      avatarSrc: ''
    }
  },
  methods: {
    getLoginInfo () {
      this.$axios.get('login/info').then(data => {
        this.loginInfo = { ...data }
        if (this.loginInfo.avatar.startsWith('http')) {
          this.avatarSrc = this.loginInfo.avatar
        } else {
          this.avatarSrc = process.env.VUE_APP_BASE_PATH + this.loginInfo.avatar
        }
        if (this.loginInfo.userinfoStatus === 1 || this.loginInfo.userinfoStatus === 4) {
          this.$alert('<div><p>您的账户未认证或认证失败</p><p>请点击 <span style="color: #409EFF">确定</span> 按钮进行实名认证</p></div>', '提示', { type: 'warning', dangerouslyUseHTMLString: true }).then(() => {
            this.auth()
          })
        } else if (this.loginInfo.userinfoStatus === 2) {
          this.$alert('已提交认证，请耐心等待管理员审核！', '提示', { type: 'info' })
        }
      })
    },
    edit () {
      this.$refs.userinfoEdit.init(this.loginInfo.userinfoId)
    },
    password () {
      this.$refs.userinfoPassword.init()
    },
    auth () {
      if (this.loginInfo.userinfoStatus === 1 || this.loginInfo.userinfoStatus === 4) {
        this.$refs.vipAuth.init()
      } else {
        this.$refs.vipAuth.init(this.loginInfo.userinfoId)
      }
    },
    logout () {
      this.$confirm('确定退出系统吗?', { type: 'info', title: '询问' }).then(() => {
        this.$axios.post('logout').then(() => {
          this.$message.success('再见')
          this.clearToken()
        }).catch(e => e)
      }).catch(e => e)
    },
    clearToken () {
      this.$cookies.remove('token')
      this.$router.replace('/login')
    }
  },
  created () {
    this.getLoginInfo()
  }
}
</script>

<style scoped lang="scss">
.content{
  height: 100vh;
  .header{
    background-color: #545c64;
    color: white;
    .header-row{
      height: 100%;
      &>.el-col{
        height: 100%;
        display: flex;
        align-items: center;
      }
      .title{
        margin: 0;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
      }
      .info{
        justify-content: right;
        .info-dropdown{
          margin-right: 20px;
          .el-dropdown-link{
            color: white;
            display: flex;
            align-items: center;
            cursor: pointer;
            .avatar{
              height: 50px;
              width: 50px;
              overflow: hidden;
              border-radius: 50%;
              margin-right: 10px;
              img{
                display: block;
                height: 100%;
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
  .aside{
    background-color: #545c64;
  }
}
</style>
